<template>
    <div style="background-color: #dae0e5">
        <head-top></head-top>
<!--		<section class="data_section">
			<header class="section_title">数据统计</header>
			<el-row :gutter="20" style="margin-bottom: 10px;">
                <el-col :span="4"><div class="data_list today_head"><span class="data_num head">当日数据：</span></div></el-col>
				<el-col :span="4"><div class="data_list"><span class="data_num">{{userCount}}</span> 新增用户</div></el-col>
				<el-col :span="4"><div class="data_list"><span class="data_num">{{orderCount}}</span> 新增订单</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">{{adminCount}}</span> 新增管理员</div></el-col>
			</el-row>
            <el-row :gutter="20">
                <el-col :span="4"><div class="data_list all_head"><span class="data_num head">总数据：</span></div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">{{allUserCount}}</span> 注册用户</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">{{allOrderCount}}</span> 订单</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">{{allAdminCount}}</span> 管理员</div></el-col>
            </el-row>
		</section>-->
<!--
		<tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency>
-->
        <el-row :gutter="20" style="height:calc(100% - 60px)"  >
            <el-col :span="19" style="height: 100%;padding: 15px 0px 15px 15px">
                <ol-map :dt="tableData" ref="olMap"></ol-map>
            </el-col>

            <el-col :span="5" style="height:calc(100% - 30px); margin:15px 0px 0px 0px" >

                <el-card class="box-card" id="table">
                    <div slot="header" class="clearfix">
                        <span>项目列表</span>
                    </div>
                    <el-table
                        :data="tableData" style="width: 100%;height: 100%;" @row-click="rowclick" max-height="330" >
                        <el-table-column
                            prop="id"
                            label="编号"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="project"
                            label="名称"
>
                        </el-table-column>
                    </el-table>
                </el-card>

                <el-row style="height: 480px;background-color: #ffffff;margin-top: 10px">
                    <div id="echart1" style="width: 100%;height: 240px;margin-top: 10px">11</div>
                    <div id="echart2" style="width: 100%;height: 240px ">22</div>
                </el-row>
            </el-col>

        </el-row>
    </div>
</template>

<script>
    ////第三方
    import echarts from 'echarts'
/*
	import dtime from 'time-formater'
*/
    ////地图

    //////自定义
    import olMap from './olmap'
    import {userCount, orderCount, getUserCount, getOrderCount, adminDayCount, adminCount} from '@/api/getData'
    import headTop from '../components/headTop'
    import tendency from '../components/tendency'
    export default {
    	data(){
    		return {
    			userCount: null,
    			orderCount: null,
                adminCount: null,
                allUserCount: null,
                allOrderCount: null,
                allAdminCount: null,
    			sevenDay: [],
    			sevenDate: [[],[],[]],
                tableData: []
    		}
    	},
    	components: {
    		headTop,
    		tendency,
            olMap
    	},
        created(){
            for(let i=0;i<10;i++)
            {
                let temp={id:i,project:"XX项目工程"+i,content:"项目描述" };
                this.tableData.push(temp);
            }

        },
    	mounted(){


/*    		this.initData();
    		for (let i = 6; i > -1; i--) {
    			const date = dtime(new Date().getTime() - 86400000*i).format('YYYY-MM-DD')
    			this.sevenDay.push(date)
    		}
    		this.getSevenData();*/

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart1'));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '工点信息',
                    textStyle:{
                        //文字颜色
                        //color:'#ccc',
                        //字体风格,'normal','italic','oblique'
                        fontStyle:'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        //fontWeight:'bold',
                        //字体系列
                        fontFamily:"Microsoft Yahei",
                        //字体大小
                        fontSize:15
                    },
                    left:'center'
                },
                tooltip: {},
                xAxis: {
                    data: ['未开工','在施工','已完工','主体已完工']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10],
                    barWidth : 30,//柱图宽度
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function(params) {
                                var colorList = ['#5f97e6','#57c059','#ff7859','#d8d8d8' ];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                }]
                //
            });

            // 基于准备好的dom，初始化echarts实例
            var myChart2 = echarts.init(document.getElementById('echart2'));
            // 绘制图表
            myChart2.setOption({
                title: {
                    text: '风险工程',
                    textStyle:{
                        //文字颜色
                        //color:'#ccc',
                        //字体风格,'normal','italic','oblique'
                        fontStyle:'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        //fontWeight:'bold',
                        //字体系列
                        fontFamily:"Microsoft Yahei",
                        //字体大小
                        fontSize:15
                    },
                    left:'center'
                },
                tooltip: {},
                xAxis: {
                    data: ['未开工','已开工','已结束']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36],
                    barWidth : 30,//柱图宽度
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function(params) {
                                var colorList = ['#5f97e6','#57c059','#ff7859','#d8d8d8' ];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                }]
                //
            });


    	},
        computed: {

        },
    	methods: {
    		async initData(){
    			const today = dtime().format('YYYY-MM-DD')
    			Promise.all([userCount(today), orderCount(today), adminDayCount(today), getUserCount(), getOrderCount(), adminCount()])
    			.then(res => {
    				this.userCount = res[0].count;
    				this.orderCount = res[1].count;
                    this.adminCount = res[2].count;
                    this.allUserCount = res[3].count;
                    this.allOrderCount = res[4].count;
                    this.allAdminCount = res[5].count;
    			}).catch(err => {
    				console.log(err)
    			})
    		},
    		async getSevenData(){
    			const apiArr = [[],[],[]];
    			this.sevenDay.forEach(item => {
    				apiArr[0].push(userCount(item))
    				apiArr[1].push(orderCount(item))
                    apiArr[2].push(adminDayCount(item))
    			})
    			const promiseArr = [...apiArr[0], ...apiArr[1], ...apiArr[2]]
    			Promise.all(promiseArr).then(res => {
    				const resArr = [[],[],[]];
					res.forEach((item, index) => {
						if (item.status == 1) {
							resArr[Math.floor(index/7)].push(item.count)
						}
					})
					this.sevenDate = resArr;
    			}).catch(err => {
    				console.log(err)
    			})
    		},
            rowclick:function (row, column, event) {
                //alert(row.id)
                this.$refs.olMap.childFn(row.id)
            }

    	}
    }
</script>

<style lang="less" >
	@import '../style/mixin';
	.data_section{
		padding: 20px;
		margin-bottom: 40px;
		.section_title{
			text-align: center;
			font-size: 30px;
			margin-bottom: 10px;
		}
		.data_list{
			text-align: center;
			font-size: 14px;
			color: #666;
            border-radius: 6px;
            background: #E5E9F2;
            .data_num{
                color: #333;
                font-size: 26px;

            }
            .head{
                border-radius: 6px;
                font-size: 22px;
                padding: 4px 0;
                color: #fff;
                display: inline-block;
            }
        }
        .today_head{
            background: #FF9800;
        }
        .all_head{
            background: #20A0FF;
        }
	}
    .wan{
        .sc(16px, #333)
    }
    /*cardstyle*/
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
        height: 390px;
    }
    #table .el-card__body{
     padding:0px
    }
    #table{
        margin: 0px;
    }
</style>
